<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>OpenLayers v8.2.0 API - Module: ol/Image</title>
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css"
        crossorigin="anonymous">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="styles/prettify-tomorrow.css">
    <link rel="stylesheet" type="text/css" href="styles/jaguar.css">
    <link rel="stylesheet" type="text/css" href="styles/carbon.css">
    <link rel="stylesheet" type="text/css" href="/theme/ol.css">
    <link rel="stylesheet" type="text/css" href="/theme/site.css">
</head>

<body>
    <header class="navbar navbar-expand-sm navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
        <a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70"
                alt="">&nbsp;OpenLayers</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu"
            aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- menu items that get hidden below 768px width -->
        <nav class="collapse navbar-collapse" id="olmenu">
            <ul class="nav navbar-nav ms-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button"
                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
                    <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
                        <a class="dropdown-item" href="/doc/">Docs</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="/doc/quickstart.html"><i
                                class="fa fa-check fa-fw me-2 fa-lg"></i>快速入门</a>
                        <a class="dropdown-item" href="/doc/faq.html"><i
                                class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
                        <a class="dropdown-item" href="/doc/tutorials/"><i
                                class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i
                                class="fab fa-stack-overflow fa-fw me-2"></i>Ask a Question</a>
                    </div>
                </li>
                <li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="apidropdown" role="button"
                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-sitemap me-1"></i>API
                    </a>
                    <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="apidropdown">
                        <a class="dropdown-item" href="/en/latest/apidoc/"><i
                                class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v8.2.0
                            (latest)</a </div>
                </li>
            </ul>
        </nav>
    </header>

    <div class="container-fluid">
        <div id="wrap" class="row">
            <div class="navigation col-md-4 col-lg-3">
                <div class="search-wrapper">
                    <div class="search">
                        <input id="search" type="text" autocomplete="off" class="form-control input-sm"
                            placeholder="Search Documentation">
                    </div>
                </div>
                <div class="navigation-list-wrapper">
                    <ul class="navigation-list search-empty">
                        <li class="item item-module toggle-manual toggle-manual-show" data-longname="module:ol/Image"
                            data-name="ol/image">
                            <span class="title toggle">
                                <span class="fa fa-plus me-2 mt-1"></span>
                                <span><a href="module-ol_Image.html">ol​/Image</a></span>
                            </span>
                            <div class="member-list" data-type="typedefs">
                                <span class="subtitle">Typedefs</span>
                                <ul>
                                    <li data-name="imageobject"><a
                                            href="module-ol_Image.html#~ImageObject">ImageObject</a>
                                    <li data-name="imageobjectpromiseloader"><a
                                            href="module-ol_Image.html#~ImageObjectPromiseLoader">ImageObjectPromiseLoader</a>
                                    <li data-name="loadfunction"><a
                                            href="module-ol_Image.html#~LoadFunction">LoadFunction</a>
                                    <li data-name="loader"><a href="module-ol_Image.html#~Loader">Loader</a>
                                </ul>
                            </div>
                            <div class="member-list" data-type="methods">
                                <span class="subtitle">Methods</span>
                                <ul>
                                    <li data-name="decode"><a href="module-ol_Image.html#.decode">decode</a>
                                    <li data-name="load"><a href="module-ol_Image.html#.load">load</a>
                                </ul>
                            </div>
                        <li class="loading">Loading …
                    </ul>
                </div>
            </div>

            <div class="main col-md-8 col-lg-9">
                <h1 class="page-title" data-filename="module-ol_Image.html">Module: ol/Image</h1>
                <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
                    <button id="latest-dismiss" type="button" class="btn-close" data-bs-dismiss="alert"
                        aria-label="Close"></button>
                    This documentation is for OpenLayers v<span id="package-version">8.2.0</span>. The <a
                        id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
                </div>




                <section class="content">

                    <header>
                        <h2 class="my-3">ol/Image
                        </h2>
                        <br>




                        <div class="row p-3 ">
                            <!-- <div id="ad" class="col-lg-5 order-2 align-self-center border rounded bg-light ">
                                <script async type="text/javascript"
                                    src="https://cdn.carbonads.com/carbon.js?serve=CE7DV53U&placement=openlayersorg"
                                    id="_carbonads_js"></script>
                            </div> -->

                        </div>
                    </header>

                    <article>
                        <div class="container-overview">






                            <dl class="details">





















                            </dl>




                        </div>


















                        <h3 class="subsection-title">Functions</h3>

                        <dl>


                            <dt class="">

                                <div class="nameContainer">
                                    <div class="anchor" id=".decode">
                                    </div>
                                    <h4 class="name">
                                        decode<span class="signature">(image, <span
                                                class="optional">src</span>)</span><span
                                            class="fa fa-arrow-circle-right"></span><span
                                            class="type-signature returnType">{Promise.&lt;(ImageBitmap|HTMLImageElement)>}</span>



                                    </h4>

                                    <div class="tag-source">
                                        <a
                                            href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/Image.js">Image.js</a>,
                                        <a
                                            href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/Image.js#L320">line
                                            320</a>
                                    </div>

                                </div>


                            </dt>
                            <dd class="">



                                <pre class="prettyprint source"><code>import {decode} from 'ol/Image';</code></pre>



                                <div class="description">
                                    <p>Loads an image and decodes it to an <code>ImageBitmap</code> if
                                        <code>createImageBitmap()</code> is supported. Returns
                                        the loaded image otherwise.
                                    </p>
                                </div>










                                <table class="params">
                                    <thead>
                                        <tr>

                                            <th>Name</th>


                                            <th>Type</th>

                                            <th class="last">Description</th>
                                        </tr>
                                    </thead>

                                    <tbody>


                                        <tr class="">

                                            <td class="name"><code>image</code></td>



                                            <td class="type">


                                                <span class="param-type">HTMLImageElement</span>




                                            </td>



                                            <td class="description last">

                                                <p>Image, not yet loaded.</p>
                                            </td>
                                        </tr>



                                        <tr class="">

                                            <td class="name"><code>src</code></td>



                                            <td class="type">


                                                <span class="param-type">string</span>

                                                | undefined


                                            </td>



                                            <td class="description last">

                                                <p><code>src</code> attribute of the image. Optional, not required if
                                                    already present.</p>
                                            </td>
                                        </tr>


                                    </tbody>
                                </table>




                                <dl class="details">





















                                </dl>















                                <h5>Returns:</h5>
                                Promise resolving to an <code>ImageBitmap</code> or an
                                <code>HTMLImageElement</code> if <code>createImageBitmap()</code> is not supported.
                                <br />




                            </dd>




                            <dt class="">

                                <div class="nameContainer">
                                    <div class="anchor" id=".load">
                                    </div>
                                    <h4 class="name">
                                        load<span class="signature">(image, <span
                                                class="optional">src</span>)</span><span
                                            class="fa fa-arrow-circle-right"></span><span
                                            class="type-signature returnType">{Promise.&lt;HTMLImageElement>}</span>



                                    </h4>

                                    <div class="tag-source">
                                        <a
                                            href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/Image.js">Image.js</a>,
                                        <a
                                            href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/Image.js#L268">line
                                            268</a>
                                    </div>

                                </div>


                            </dt>
                            <dd class="">



                                <pre class="prettyprint source"><code>import {load} from 'ol/Image';</code></pre>



                                <div class="description">
                                    <p>Loads an image.</p>
                                </div>










                                <table class="params">
                                    <thead>
                                        <tr>

                                            <th>Name</th>


                                            <th>Type</th>

                                            <th class="last">Description</th>
                                        </tr>
                                    </thead>

                                    <tbody>


                                        <tr class="">

                                            <td class="name"><code>image</code></td>



                                            <td class="type">


                                                <span class="param-type">HTMLImageElement</span>




                                            </td>



                                            <td class="description last">

                                                <p>Image, not yet loaded.</p>
                                            </td>
                                        </tr>



                                        <tr class="">

                                            <td class="name"><code>src</code></td>



                                            <td class="type">


                                                <span class="param-type">string</span>

                                                | undefined


                                            </td>



                                            <td class="description last">

                                                <p><code>src</code> attribute of the image. Optional, not required if
                                                    already present.</p>
                                            </td>
                                        </tr>


                                    </tbody>
                                </table>




                                <dl class="details">





















                                </dl>















                                <h5>Returns:</h5>
                                Promise resolving to an <code>HTMLImageElement</code>.
                                <br />




                            </dd>

                        </dl>



                        <h3 class="subsection-title">Type Definitions</h3>

                        <dl>

                            <dt class="">
                                <div class="nameContainer">
                                    <div class="anchor" id="~ImageObject">
                                    </div>
                                    <h4 class="name">
                                        ImageObject<span class="type-signature type object">{Object}</span>


                                    </h4>
                                </div>

                            </dt>
                            <dd class="">



                                <dl class="details">


                                    <h5 class="subsection-title">Properties:</h5>

                                    <dl>

                                        <table class="props">
                                            <thead>
                                                <tr>

                                                    <th>Name</th>


                                                    <th>Type</th>

                                                    <th class="last">Description</th>
                                                </tr>
                                            </thead>

                                            <tbody>


                                                <tr>

                                                    <td class="name"><code>extent</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_extent.html#~Extent">Extent</a></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>Extent, if different from the requested one.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>resolution</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_resolution.html#~ResolutionLike">ResolutionLike</a></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>Resolution, if different from the requested one.
                                                            When x and y resolution are different, use the array type
                                                            (<code>[xResolution, yResolution]</code>).</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>pixelRatio</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>Pixel ratio, if different from the requested one.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>image</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_DataTile.html#~ImageLike">ImageLike</a></span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>Image.</p>

                                                    </td>
                                                </tr>


                                            </tbody>
                                        </table>
                                    </dl>






















                                </dl>



                            </dd>



                            <dt class="">

                                <div class="nameContainer">
                                    <div class="anchor" id="~ImageObjectPromiseLoader">
                                    </div>
                                    <h4 class="name">
                                        ImageObjectPromiseLoader<span class="signature">()</span>



                                    </h4>

                                    <div class="tag-source">
                                        <a
                                            href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/Image.js">Image.js</a>,
                                        <a
                                            href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/Image.js#L52">line
                                            52</a>
                                    </div>

                                </div>


                            </dt>
                            <dd class="">




                                <div class="description">
                                    <p>Loader function used for image sources. Receives extent, resolution and pixel
                                        ratio as arguments.
                                        The function returns a promise for an <a
                                            href="module-ol_Image.html#~ImageObject"><code>image object</code></a>.</p>
                                </div>











                                <dl class="details">





















                                </dl>













                            </dd>



                            <dt class="">

                                <div class="nameContainer">
                                    <div class="anchor" id="~LoadFunction">
                                    </div>
                                    <h4 class="name">
                                        LoadFunction<span class="signature">()</span>



                                    </h4>

                                    <div class="tag-source">
                                        <a
                                            href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/Image.js">Image.js</a>,
                                        <a
                                            href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/Image.js#L11">line
                                            11</a>
                                    </div>

                                </div>


                            </dt>
                            <dd class="">




                                <div class="description">
                                    <p>A function that takes an <a
                                            href="module-ol_Image-ImageWrapper.html"><code>ImageWrapper</code></a> for
                                        the image and a
                                        <code>{string}</code> for the src as arguments. It is supposed to make it so the
                                        underlying image <code>getImage</code> is assigned the
                                        content specified by the src. If not specified, the default is
                                    </p>
                                    <pre class="prettyprint source"><code>function(image, src) {
  image.getImage().src = src;
}</code></pre>
                                    <p>Providing a custom <code>imageLoadFunction</code> can be useful to load images
                                        with
                                        post requests or - in general - through XHR requests, where the src of the
                                        image element would be set to a data URI when the content is loaded.</p>
                                </div>











                                <dl class="details">





















                                </dl>













                            </dd>



                            <dt class="">

                                <div class="nameContainer">
                                    <div class="anchor" id="~Loader">
                                    </div>
                                    <h4 class="name">
                                        Loader<span class="signature">()</span>



                                    </h4>

                                    <div class="tag-source">
                                        <a
                                            href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/Image.js">Image.js</a>,
                                        <a
                                            href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/Image.js#L38">line
                                            38</a>
                                    </div>

                                </div>


                            </dt>
                            <dd class="">




                                <div class="description">
                                    <p>Loader function used for image sources. Receives extent, resolution and pixel
                                        ratio as arguments.
                                        For images that cover any extent and resolution (static images), the loader
                                        function should not accept
                                        any arguments. The function returns an <a
                                            href="module-ol_DataTile.html#~ImageLike"><code>image</code></a>, an
                                        <a href="module-ol_Image.html#~ImageObject"><code>image object</code></a>, or a
                                        promise for the same.
                                        For loaders that generate images, the promise should not resolve until the image
                                        is loaded.
                                        If the returned image does not match the extent, resolution or pixel ratio
                                        passed to the loader,
                                        it has to return an <a
                                            href="module-ol_Image.html#~ImageObject"><code>image object</code></a> with
                                        the <code>image</code> and the
                                        correct <code>extent</code>, <code>resolution</code> and
                                        <code>pixelRatio</code>.
                                    </p>
                                </div>











                                <dl class="details">





















                                </dl>













                            </dd>

                        </dl>



                    </article>

                </section>




            </div>
        </div>
    </div>
    <script>prettyPrint();</script>
    <script src="scripts/linenumber.js"></script>
    <script src="scripts/main.js"></script>
</body>

</html>